<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI路径优化助手 - 地图版</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=003df4ac18f1cca97eaf59dc90afbaa2"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            display: flex;
            height: 100vh;
        }
        
        .left-panel {
            width: 400px;
            background: white;
            padding: 20px;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }
        
        .right-panel {
            flex: 1;
            position: relative;
        }
        
        #mapContainer {
            width: 100%;
            height: 100%;
        }
        
        .search-form {
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #2d3748;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
        }
        
        .search-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
        }
        
        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .route-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
        
        .route-item {
            padding: 10px;
            border-bottom: 1px solid #e2e8f0;
            cursor: pointer;
        }
        
        .route-item:hover {
            background: #e2e8f0;
        }
        
        .route-item:last-child {
            border-bottom: none;
        }
        
        .route-title {
            font-weight: 600;
            color: #2d3748;
        }
        
        .route-details {
            font-size: 14px;
            color: #718096;
            margin-top: 5px;
        }
        
        .map-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        .control-btn {
            background: white;
            border: none;
            padding: 10px 15px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .control-btn:hover {
            background: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧控制面板 -->
        <div class="left-panel">
            <h2>AI路径优化助手</h2>
            <p>智能规划您的出行路线，让旅行更简单</p>
            
            <div class="search-form">
                <div class="form-group">
                    <label for="origin">出发地</label>
                    <input type="text" id="origin" placeholder="请输入出发地...">
                </div>
                <div class="form-group">
                    <label for="destination">目的地</label>
                    <input type="text" id="destination" placeholder="请输入目的地...">
                </div>
                <div class="form-group">
                    <label for="transport-type">出行方式</label>
                    <select id="transport-type">
                        <option value="driving">驾车</option>
                        <option value="transit">公交</option>
                        <option value="walking">步行</option>
                        <option value="bicycling">骑行</option>
                    </select>
                </div>
                <button class="search-btn" onclick="searchRoute()">搜索路线</button>
            </div>
            
            <div class="route-info" id="route-info" style="display: none;">
                <h3>推荐路线</h3>
                <div id="route-list"></div>
            </div>
        </div>
        
        <!-- 右侧地图面板 -->
        <div class="right-panel">
            <div id="mapContainer"></div>
            <div class="map-controls">
                <button class="control-btn" onclick="getCurrentLocation()">📍 我的位置</button>
                <button class="control-btn" onclick="clearRoute()">🗑️ 清除路线</button>
            </div>
        </div>
    </div>

    <script>
        let map;
        let currentLocation;
        let routeLayer;
        
        // 初始化地图
        function initMap() {
            map = new AMap.Map('mapContainer', {
                zoom: 10,
                center: [116.3974, 39.9093], // 北京
                mapStyle: 'amap://styles/normal'
            });
            
            // 添加地图控件
            map.addControl(new AMap.Scale());
            map.addControl(new AMap.ToolBar());
            
            // 获取当前位置
            getCurrentLocation();
        }
        
        // 获取当前位置
        function getCurrentLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const lng = position.coords.longitude;
                        const lat = position.coords.latitude;
                        currentLocation = [lng, lat];
                        
                        // 添加当前位置标记
                        const marker = new AMap.Marker({
                            position: [lng, lat],
                            title: '我的位置',
                            icon: new AMap.Icon({
                                size: new AMap.Size(32, 32),
                                image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
                            })
                        });
                        map.add(marker);
                        map.setCenter([lng, lat]);
                        
                        // 逆地理编码获取地址
                        const geocoder = new AMap.Geocoder();
                        geocoder.getAddress([lng, lat], function(status, result) {
                            if (status === 'complete' && result.regeocode) {
                                const address = result.regeocode.formattedAddress;
                                document.getElementById('origin').value = address;
                            }
                        });
                    },
                    function(error) {
                        console.error('获取位置失败:', error);
                        alert('无法获取您的位置，请手动输入出发地');
                    }
                );
            } else {
                alert('您的浏览器不支持地理定位');
            }
        }
        
        // 搜索路线
        function searchRoute() {
            const origin = document.getElementById('origin').value;
            const destination = document.getElementById('destination').value;
            const transportType = document.getElementById('transport-type').value;
            
            if (!origin || !destination) {
                alert('请输入出发地和目的地');
                return;
            }
            
            // 清除之前的路线
            clearRoute();
            
            // 地理编码
            const geocoder = new AMap.Geocoder();
            geocoder.getLocation(origin, function(status, result) {
                if (status === 'complete' && result.geocodes.length > 0) {
                    const originPos = result.geocodes[0].location;
                    
                    geocoder.getLocation(destination, function(status, result) {
                        if (status === 'complete' && result.geocodes.length > 0) {
                            const destPos = result.geocodes[0].location;
                            
                            // 规划路线
                            planRoute(originPos, destPos, transportType);
                        } else {
                            alert('无法找到目的地位置');
                        }
                    });
                } else {
                    alert('无法找到出发地位置');
                }
            });
        }
        
        // 规划路线
        function planRoute(origin, destination, transportType) {
            const driving = new AMap.Driving({
                map: map,
                showTraffic: true,
                hideMarkers: false
            });
            
            const transit = new AMap.Transfer({
                map: map,
                city: '北京市',
                hideMarkers: false
            });
            
            const walking = new AMap.Walking({
                map: map,
                hideMarkers: false
            });
            
            let routeService;
            switch(transportType) {
                case 'driving':
                    routeService = driving;
                    break;
                case 'transit':
                    routeService = transit;
                    break;
                case 'walking':
                    routeService = walking;
                    break;
                default:
                    routeService = driving;
            }
            
            routeService.search(origin, destination, function(status, result) {
                if (status === 'complete') {
                    displayRouteInfo(result);
                } else {
                    alert('路线规划失败');
                }
            });
        }
        
        // 显示路线信息
        function displayRouteInfo(result) {
            const routeInfo = document.getElementById('route-info');
            const routeList = document.getElementById('route-list');
            
            routeInfo.style.display = 'block';
            routeList.innerHTML = '';
            
            if (result.routes && result.routes.length > 0) {
                result.routes.forEach((route, index) => {
                    const routeItem = document.createElement('div');
                    routeItem.className = 'route-item';
                    routeItem.innerHTML = `
                        <div class="route-title">方案 ${index + 1}</div>
                        <div class="route-details">
                            距离: ${(route.distance / 1000).toFixed(1)}公里 | 
                            时间: ${Math.round(route.time / 60)}分钟 | 
                            费用: ¥${route.tolls || 0}
                        </div>
                    `;
                    routeList.appendChild(routeItem);
                });
            }
        }
        
        // 清除路线
        function clearRoute() {
            if (routeLayer) {
                map.remove(routeLayer);
            }
            document.getElementById('route-info').style.display = 'none';
        }
        
        // 页面加载完成后初始化地图
        window.onload = function() {
            initMap();
        };
    </script>
</body>
</html>